<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 本地 -->
    <script src="../js/jquery-1.10.1.min.js"></script>
    <!-- <script src="../js/jquery-3.6.0.min.js"></script> -->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        #tips {
            background-color: grey;
            line-height: 45px;
        }

        .list {
            padding: 10px 0;
            background-color: #f1f1f1;
            overflow: hidden;
        }

        .list li {
            height: 32px;
            line-height: 32px;
            border: 1px dashed #333;
        }

        .list .newLi {
            border-color: red;
        }

        .list .active {
            background-color: #6ff;
        }
    </style>

</head>

<body>
    <!-- <input hidden type="text"> -->
    <div class="wrap">
        <h3 id="tips">事件</h3>
        <div class="list">
            <li class="first" title="hei">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last"><span class="test">06</span></li>
        </div>
    </div>

</body>
<script>

    // $(".list li").click(function () { })

    // 注意
    // 1.  所有的事件都是由 on方法进行的二次封装
    // 2.  on方法是通过事件监听绑定 addEventListener()   =>  可以同时给一个元素绑定多个同类型的事件



    // 事件的绑定  和  事件的清除
    // 普通绑定 
    // $(ele).on(eventType,callback)  
    // ele  绑定事件的元素
    // eventType   事件类型
    // callback    事件触发时执行的回调函数


    function clickHandler() {
        alert($(this).index());
    }
    $(".list li").on("click", clickHandler);


    $(".list li").on("click", function () {
        $(this).addClass("active").siblings().removeClass("active");
    })

    $(".list li").on("mouseenter", function () {
        console.log("hello:", $(this).index());
    })




    // $(ele).off(eventType,callback)  
    // 1. 对应函数名 (应用同一个内存空间)
    // $(".list li").off("click", clickHandler);

    // 2. 对应事件类型清除
    // $(".list li").off("click");

    // 3. 清除所有事件
    $(".list li").off();




</script>


</html>